<!-- 代表作：高频 -->
<script setup>
import { reactive, ref, watch, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { loadBMapGLScript } from '@T2/utils/BMapGL_API.ts';
import { mapStyle } from './mapStyle.js';
import { isJSON } from '@T2/utils/utils.ts';
import { useCurrentWatchStore } from '@T2/store/users.ts';
import DataAside from './framework/dataAside.vue';
import NormalPNG from '@T2/assets/maps/buoy-normal.png';

const currentWatchStore = useCurrentWatchStore();
const { curProject } = currentWatchStore;

const Resd = reactive({
  units: undefined,
  sensors: [],
});
let maps = {};
onMounted(async () => {
  if (!window.BMapGL) {
    await loadBMapGLScript();
  }
  
  // const flag = true;
  const flag = import.meta.env.MODE !== 'development';
  flag && mapsInit();
})
const mapsInit = () => {
  if (!curProject.x || !curProject.y) {
    ElMessage.error('项目未设置经纬度！');
    return;
  }
  maps = new window.BMapGL.Map('map_container', { minZoom: 7 });
  maps.setMapStyleV2({styleJson: mapStyle});
  maps.setTilt(0);    // 设置地图倾斜角
  maps.setHeading(0); // 设置地图倾斜角
  maps.enableKeyboard();
  maps.enableScrollWheelZoom();
  maps.enableInertialDragging();
  maps.enableContinuousZoom();
  maps.setDisplayOptions({ poi: true, poiIcon: false});
  
  const point = new window.BMapGL.Point(+curProject.x, +curProject.y);
  const viewPort = maps.getViewport([point]);
  maps.centerAndZoom(viewPort.center, viewPort.zoom);
  
  initHome(maps.getCenter(), maps.getZoom());
  
  const icon = new window.BMapGL.Icon(NormalPNG, new window.BMapGL.Size(0, 0));
  let marker = new window.BMapGL.Marker(point, { icon: icon });
  maps.addOverlay(drawMarker(marker, curProject));
}
const drawMarker = (marker, item) => {
  setTimeout(() => {
    let eleName = document.createElement('div');
    eleName.className = 'buoy-name';
    eleName.innerHTML = `<div>${ item.name }</div>`;
    marker.domElement.appendChild(eleName);
    
    let eleIcon = document.createElement('div');
    eleIcon.className = item.warn_number > 0 ? 'map-buoy alarm' : 'map-buoy';
    marker.domElement.appendChild(eleIcon);
  }, 100);
  return marker;
}

/* 回到初始地图位置 */
const homeRt = reactive({
  times: 0,
  center: {},
  zoom: 12,
});
const initHome = (center, zoom) => {
  homeRt.center = center;
  homeRt.zoom = zoom;
}
watch(() => homeRt.times, (nv, ov) => {
  maps.centerAndZoom(homeRt.center, homeRt.zoom);
});

</script>

<template>
  <div id="map_container" class="BMap_container"></div>
  
  <DataAside />
</template>

<style lang="scss" scoped>
@use '@T2/styles/BMap.scss';
.BMap_container {
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}
</style>

<style scoped>
:deep(.BMap_bubble_pop) {
  /* BMap_bubble_top高度为31px,img高度31px，36px为图标高度 */
  transform: translateY(calc(31px + 31px - 36px - 25px));/* px-to-viewport-ignore */
}
:deep(.map-buoy) {
  position: absolute;
  transform: translateX(-50%) translateY(-36px);  /* px-to-viewport-ignore */
  width: 30px;  /* px-to-viewport-ignore */
  height: 36px; /* px-to-viewport-ignore */
  background: url('./assets/map-icon.png') no-repeat center;
  background-size: 100% 100%;
}
:deep(.map-buoy.alarm) {
  background: url('./assets/map-icon.png') no-repeat center;
  background-size: 100% 100%;
}
:deep(.openTips) {
  pointer-events: auto !important;
  overflow: hidden;
  z-index: 1000;
  width: 413px;   /* px-to-viewport-ignore */
  height: 196px;  /* px-to-viewport-ignore */
  background: url('./assets/popup-bg.png') no-repeat center;
  background-size: 100% 100%;
}
:deep(.buoy-name) {
  height: 25px;       /* px-to-viewport-ignore */
  line-height: 25px;  /* px-to-viewport-ignore */
  padding: 0 15px;
  position: absolute;
  top: -61px;         /* px-to-viewport-ignore */
  left: 0;
  transform: translateX(-50%);
  border: 1px solid #fff;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%);
  border-radius: 14px 0px;
  border: 1px solid #FFFFFF;
  font-size: 14px;    /* px-to-viewport-ignore */
  letter-spacing: 2px;
  white-space: nowrap;
  width: fit-content;
  color: #fff;
}

:deep(.tool-btn .el-icon:hover) {
  color: #00FFFF;
}
</style>